<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Dom对象 与 jQuery包装集对象</title>
	</head>
	<body>
		<div id="mydiv">文本</div>
	</body>
	<!--
		Dom对象
			通过js方式获取的元素对象（document）
		jQuery对象
			通过jquery方法获取的元素对象，返回的是jquery包装集
	 -->
	 <!-- 引入jquery的核心js文件 （如果未引入jquery，则报错：$ is not defined）-->
	 <script src="js/jquery.min.js"></script>
	 <script type="text/javascript">
	 	/*  Dom对象 */
		var divDom = document.getElementById("mydiv");
		console.log(divDom);
		var divsDom = document.getElementsByTagName("div");
		console.log(divsDom);
		// js获取不存在的元素
		var spanDom = document.getElementsByTagName("span");
		console.log(spanDom);
		var spanDom2 = document.getElementById("myspan");
		console.log(spanDom2);

		console.log("==========");


		/* jQuery对象 */
		// 通过id选择获取元素对象  $("#id属性值")
		var divJquery = $("#mydiv");
		console.log(divJquery);
		// jquery获取不存在的元素
		var spanJquery = $("#myspan");
		console.log(spanJquery);

		console.log("========");
		/* Dom对象 转 jQuery对象 */
		// Dom对象转为jQuery对象，只需要利用$()方法进行包装即可
		var divDomToJquery = $(divDom);
		console.log(divDomToJquery);

		/* jQuery对象 转 Dom对象 */
		// 获取包装集对象中指定下标的元素，将jQuery对象转换成dom对象
		var divJqueryToDom = divJquery[0];
		console.log(divJqueryToDom);

	 </script>
</html>
